<template>
  <!-- 如果是内嵌到app中，那么顶部会多一点区间 -->
  <div class="content-wrap max-width" :style="isRN ? { paddingTop: statusbarheight + 'px' } : {}">
    <header class="header max-width">
      <div v-if="isRN" :style="{ height: statusbarheight + 'px' }"></div>
      <app-header title="首页"></app-header>
      <NavBar title="标题" left-text="返回" left-arrow @click-left="onClickLeft" />
    </header>
    <div class="list-wrap">
      <refresh-list :onQuery="onQuery">
        <template v-slot:default="item">
          <div class="item">{{ item.item }}</div>
        </template>
      </refresh-list>
    </div>
  </div>
</template>
<script setup>
import { NavBar } from 'vant'
import RefreshList from '@/components/RefreshList.vue'
import { useApp } from '@/hooks/useApp.js'
const { isRN, statusbarheight } = useApp()

const onQuery = (params) => {
  const total = 41
  const { pageNo, pageSize } = params
  return new Promise((resolve) => {
    resolve({
      total,
      list: Array.from(new Array(10), (x, i) => {
        return pageNo * pageSize + (i + 1)
      })
    })
  })
}
</script>
<style lang="scss" scoped>
.content-wrap {
  width: 100%;
  margin: 0 auto;
  padding-top: 200px;
  .header {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    background: red;
  }
  .list-wrap {
    height: 400px;
    background: yellow;
    .item {
      height: 50px;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
